<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset-1.0.0.css" />
    <script src="http://js.h5course.cn/jquery-1.11.3.min.js" type="text/javascript"></script>
	<style>
		.wrap {
			position: relative;
			width: 1200px;
			height: 400px;
			margin: 0 auto;
		}
		.main {
			position: relative;
			width: 1000px;
			height: 400px;
			margin: 0 auto;
		}
		.main a {
			position: absolute;
			opacity: 0;
		}
		.main a img {
			display: block;
			width: 100%;
		}
		.wrap span {
			position: absolute;
			top: 175px;
			width: 80px;
			height: 50px;
			background-color: rgba(1, 1, 1, 0.5);
			line-height: 50px;
			color: #fff;
			text-align: center;
			cursor: pointer;
			border-radius: 5px;
		}
		.wrap .pre {
			left: 0;
		}
		.wrap .next {
			right: 0;
		}
		.wrap p {
			font-size: 30px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<span class="pre">上一张</span>
		<span class="next">下一张</span>
		<div class="main">
			<a href="" title="3"  data-index="1"><img src="images/img1.jpg" alt="" title="1"></a>
			<a href="" title="4"  data-index="2"><img src="images/img2.jpg" alt="" title="2"></a>
			<a href="" title="5"  data-index="3"><img src="images/img3.jpg" alt="" title="3"></a>
			<a href="" title="6" data-index="4"><img src="images/img4.jpg" alt="" title="4"></a>
			<a href="" title="7" data-index="5"><img src="images/img5.jpg" alt="" title="5"></a>
			<a href="" title="8" data-index="6"><img src="images/img6.jpg" alt="" title="6"></a>
			<a href="" title="9" data-index="7"><img src="images/img7.jpg" alt="" title="7"></a>
			<a href="" title="10" data-index="8"><img src="images/img8.jpg" alt="" title="8"></a>
			<a href="" title="1"  data-index="9"><img src="images/img9.jpg" alt="" title="9"></a>
			<a href="" title="2"  data-index="10"><img src="images/img10.jpg" alt="" title="10"></a>
		</div>
		<p>梦幻雪冰（微信：cnb718747239）</p>
	</div>
	<script>
		// left:0  100  250  450  600
		// top: 80 65   50    65 80
		// 0*100 1*100 2*100+50 3*100+150 4*100+200

		// 9 10 1 2 3   4 5 6 7 8 
		// 10 1 2 3 4   5 6 7 8 9
		// 1 2 3 4 5   6 7 8 9 10
		// 2 3 4 5 6   7 8 9 10 1
		// 3 4 5 6 7   8 9 10 1 2

		// 9 10 1 2 3   4 5 6 7 8 
		// 8 9 10 1 2 3 4 5 6 7
		var pre 	= $(".pre");
		var next 	= $(".next");
		var aArr 	= $(".main a"); 

		var index = 0;
		var indexArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
		var dele = null;
		var app = null;

		pre.click(function() {
			dele = indexArr.pop();
			indexArr.unshift(dele);
			for (var i = 0; i < 5; i++) {
				show(i);
			};
		});
		next.click(function() {
			dele = indexArr.shift();
			indexArr.push(dele);
			for (var i = 0; i < 5; i++) {
				show(i);
			};
			console.log(indexArr);
		});

		function show(i) {
			for (var j = 5; j < 9; j++) {
				aArr.eq(indexArr[j] - 1).stop(true, true).animate({
					"opacity": "0",
					"left": "0px",
					"top": "80px",
					"width": "400px",
					"z-index": "0"
				});
			};
			switch(i) {
				case 0:aArr.eq(indexArr[i] - 1).stop(true, true).animate({
					"left": "0",
					"top": "80px",
					"opacity": "1",
					"z-index": "1",
					"width": "400px"
				}, 60);break;
				case 1:aArr.eq(indexArr[i] - 1).stop(true, true).animate({
					"left": "100px",
					"top": "65px",
					"opacity": "1",
					"z-index": "2",
					"width": "450px"
				}, 60);break;
				case 2:aArr.eq(indexArr[i] - 1).stop(true, true).animate({
					"left": "250px",
					"top": "50px",
					"opacity": "1",
					"z-index": "10",
					"width": "500px"
				}, 20);break;
				case 3: aArr.eq(indexArr[i] - 1).stop(true, true).animate({
					"left": "450px",
					"top": "65px",
					"opacity": "1",
					"z-index": "2",
					"width": "450px"
				}, 60);break;
				case 4: aArr.eq(indexArr[i] - 1).stop(true, true).animate({
					"left": "600px",
					"top": "80px",
					"opacity": "1",
					"z-index": "1",
					"width": "400px"
				}, 60);break;																				
			}			
		}

		for (var i = 0; i < 5; i++) {
			show(i);
		};
	</script>
</body>
</html>